<div class="lock-screen-wrapper">
    <div class="lock-screen-time"></div>
    <div class="lock-screen-date"></div>
    <div class="lock-screen-form">
        <input placeholder="输入123456解锁" autocomplete="new-password" class="lock-screen-psw" maxlength="20" type="password" name="newpwd" id="newpwd"/>
        <i class="layui-icon layui-icon-right lock-screen-enter"></i>
        <br/>
        <div class="lock-screen-tip"></div>
    </div>
    <div class="lock-screen-tool">
        <div class="lock-screen-tool-item">
            <i class="layui-icon layui-icon-logout" data-confirm="false" id="logoutBtn"></i>
            <div class="lock-screen-tool-tip">退出登录</div>
        </div>
    </div>
</div>

<script>
    layui.use(['util', 'admin', 'ax'], function () {
        var $ = layui.jquery;
        var util = layui.util;
        var admin = layui.admin;
        var $ax = layui.ax;
        var rightPsw = 'e10adc3949ba59abbe56e057f20f883e';  // 正确密码的MD5密文

        // 获取各个组件
        var $form = $('.lock-screen-wrapper .lock-screen-form');
        var $psw = $form.find('.lock-screen-psw');
        var $tip = $form.find('.lock-screen-tip');
        var $time = $('.lock-screen-wrapper .lock-screen-time');
        var $date = $('.lock-screen-wrapper .lock-screen-date');

        // 监听退出
        $('#logoutBtn').click(function (e) {

            //解锁锁屏
            admin.unlockScreen();

            var ajax = new $ax(Feng.ctxPath + "/logout", function (data) {
                Feng.success("退出成功!");
                location.replace(Feng.ctxPath + "/");
            }, function (data) {
                layer.msg("退出失败！" + data.responseJSON.message, {icon: 5, anim: 6});
            });
            ajax.start();
        });

        // 监听enter键
        $(window).keydown(function (event) {
            if (admin.isLockScreen) {
                if (event.keyCode === 13) {
                    doVer();
                } else if (event.keyCode === 8 && !$psw.val()) {
                    restForm();
                    if (event.preventDefault) event.preventDefault();
                    if (event.returnValue) event.returnValue = false;
                }
            }
        });

        // 监听输入
        $psw.on('input', function () {
            var psw = $psw.val();
            if (rightPsw === toMd5Hex(psw)) {
                restForm();
                admin.unlockScreen();
            } else if (psw) {
                $form.removeClass('show-back');
                $tip.text('');
            } else {
                $form.addClass('show-back');
            }
        });

        // 监听按钮点击
        $form.find('.lock-screen-enter').click(function (e) {
            doVer(true);
        });

        // 处理事件
        function doVer(emptyRest) {
            if ($form.hasClass('show-psw')) {
                $psw.focus();
                var psw = $psw.val();
                if (!psw) {
                    emptyRest ? restForm() : $tip.text('请输入解锁密码');
                } else if (rightPsw === toMd5Hex(psw)) {
                    restForm();
                    admin.unlockScreen();
                } else {
                    $psw.val('');
                    $tip.text('密码不正确');
                    $form.addClass('show-back');
                }
            } else {
                $form.addClass('show-psw show-back');
                $psw.focus();
            }
        }

        // 重置
        function restForm() {
            $psw.blur();
            $psw.val('');
            $tip.text('');
            $form.removeClass('show-psw show-back');
        }

        // 时间、日期
        function setDate() {
            var date = new Date();
            $time.text(util.toDateString(date, 'HH:mm'));
            var weeks = ['日', '一', '二', '三', '四', '五', '六'];
            $date.text(util.toDateString(date, 'MM月dd日，星期') + weeks[date.getDay()]);
        }

        setDate();

        setInterval(function () {
            if (admin.isLockScreen) setDate();
        }, 1000);

    });
</script>

<style>
    .lock-screen-wrapper {
        color: #ffffff;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 50px 60px 0 60px;
        background-color: #000000;
        background-image: url("${ctxPath}/assets/common/images/bg-screen.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .lock-screen-time {
        font-size: 88px;
    }

    .lock-screen-date {
        font-size: 24px;
        padding: 0 0 0 13px;
    }

    .lock-screen-form {
        position: absolute;
        left: 0;
        right: 0;
        top: 65%;
        width: 100%;
        text-align: center;
    }

    .lock-screen-psw {
        color: #ffffff;
        font-size: 22px;
        width: 0;
        height: 0;
        line-height: 40px;
        border-radius: 40px;
        border: 2px solid transparent;
        background-color: transparent;
        box-sizing: border-box;
        vertical-align: middle;
        -webkit-transition: all .3s;
        transition: all .3s;
        text-align: center;
    }

    .lock-screen-psw::-webkit-input-placeholder {
        color: #F6F6F6;
        font-size: 16px;
    }

    .lock-screen-psw::-moz-placeholder {
        color: #F6F6F6;
        font-size: 16px;
    }

    .lock-screen-psw::-ms-input-placeholder {
        color: #F6F6F6;
        font-size: 16px;
    }

    .lock-screen-enter {
        width: 65px;
        height: 65px;
        line-height: 1;
        font-size: 28px;
        padding-top: 18px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        transition: all .3s;
        cursor: pointer;
    }

    .lock-screen-enter:hover {
        background-color: rgba(255, 255, 255, .3);
    }

    .lock-screen-form.show-psw .lock-screen-psw {
        height: 40px;
        width: 180px;
        padding: 0 5px;
        margin-right: 10px;
        border-color: #ffffff;
        background-color: rgba(255, 255, 255, .3);
    }

    .lock-screen-form.show-psw .lock-screen-enter {
        width: 40px;
        height: 40px;
        font-size: 20px;
        padding-top: 8px;
    }

    .lock-screen-form.show-back .lock-screen-enter:before {
        content: "\e603";
    }

    .lock-screen-tip {
        color: red;
        width: 230px;
        padding: 0 3px;
        font-size: 14px;
        text-align: left;
        box-sizing: border-box;
        display: none;
    }

    .lock-screen-form.show-psw .lock-screen-tip {
        display: inline-block;
    }

    .lock-screen-tool {
        width: 20px;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    .lock-screen-tool .lock-screen-tool-item {
        position: relative;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-top: 15px;
        cursor: pointer;
    }

    .lock-screen-tool .lock-screen-tool-item:hover .layui-icon {
        color: #ffffff;
    }

    .lock-screen-tool .layui-icon {
        font-size: 20px;
    }

    .lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip {
        position: absolute;
        top: 50%;
        right: 100%;
        height: 24px;
        line-height: 24px;
        width: 60px;
        width: max-content;
        text-align: center;
        margin-right: 10px;
        margin-top: -12px;
        font-size: 12px;
        padding: 0 8px;
        color: #eee;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, .3);
        word-break: break-all;
        display: none;
    }

    .lock-screen-tool .lock-screen-tool-item:hover .lock-screen-tool-tip {
        display: inline-block;
    }

    .lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip:before {
        content: "";
        border: 4px solid transparent;
        border-left-color: rgba(255, 255, 255, .3);
        position: absolute;
        right: -8px;
        top: 50%;
        margin-top: -4px;
    }
</style>

<script>
    /** MD5加密 */
    function toMd5Hex(text) {
        var hexcase = 0;
        var chrsz = 8;

        function core_md5(x, len) {
            x[len >> 5] |= 0x80 << ((len) % 32);
            x[(((len + 64) >>> 9) << 4) + 14] = len;
            var a = 1732584193;
            var b = -271733879;
            var c = -1732584194;
            var d = 271733878;
            for (var i = 0; i < x.length; i += 16) {
                var olda = a;
                var oldb = b;
                var oldc = c;
                var oldd = d;
                a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
                d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
                c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
                b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
                a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
                d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
                c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
                b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
                a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
                d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
                c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
                b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
                a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
                d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
                c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
                b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
                a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
                d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
                c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
                b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
                a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
                d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
                c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
                b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
                a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
                d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
                c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
                b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
                a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
                d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
                c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
                b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
                a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
                d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
                c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
                b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
                a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
                d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
                c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
                b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
                a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
                d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
                c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
                b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
                a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
                d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
                c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
                b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
                a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
                d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
                c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
                b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
                a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
                d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
                c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
                b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
                a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
                d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
                c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
                b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
                a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
                d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
                c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
                b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
                a = safe_add(a, olda);
                b = safe_add(b, oldb);
                c = safe_add(c, oldc);
                d = safe_add(d, oldd);
            }
            return Array(a, b, c, d);
        }

        function md5_cmn(q, a, b, x, s, t) {
            return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
        }

        function md5_ff(a, b, c, d, x, s, t) {
            return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
        }

        function md5_gg(a, b, c, d, x, s, t) {
            return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
        }

        function md5_hh(a, b, c, d, x, s, t) {
            return md5_cmn(b ^ c ^ d, a, b, x, s, t);
        }

        function md5_ii(a, b, c, d, x, s, t) {
            return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
        }

        function safe_add(x, y) {
            var lsw = (x & 0xFFFF) + (y & 0xFFFF);
            var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
            return (msw << 16) | (lsw & 0xFFFF);
        }

        function bit_rol(num, cnt) {
            return (num << cnt) | (num >>> (32 - cnt));
        }

        function str2binl(str) {
            var bin = Array();
            var mask = (1 << chrsz) - 1;
            for (var i = 0; i < str.length * chrsz; i += chrsz)
                bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
            return bin;
        }

        function binl2hex(binarray) {
            var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
            var str = "";
            for (var i = 0; i < binarray.length * 4; i++) {
                str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
                    hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
            }
            return str;
        }

        return binl2hex(core_md5(str2binl(text), text.length * chrsz));
    }
</script>